<template>
    <div>
        <button @click="savePhoto">保存</button>
    </div>
    <div class="dragg-container justify-center">
        <div class="dragg-content" ref="draggContent">
            <!-- <vue-draggable-resizable :parent="true" :z="zIndexObj.goodsIndex">
        <p>商品素材</p>
      </vue-draggable-resizable> -->
            <vue-draggable-resizable :parent="true" :z="zIndexObj.imageIndex + 1" :w="imageConfig.width" :min-width="50"
                :min-height="50" :h="imageConfig.height">
                <video :src="videoSrc" autoplay width="100%" controls height="100%"></video>
            </vue-draggable-resizable>
            <vue-draggable-resizable :parent="true" :z="zIndexObj.imageIndex + 1" :w="imageConfig.width" :min-width="50"
                :min-height="50" :h="imageConfig.height" @dragging="onLogoDrag" @resizing="onLogoResize">
                <img :src="logoSrc" width="100%" height="100%" alt="">
            </vue-draggable-resizable>
            <vue-draggable-resizable :parent="true" :z="zIndexObj.imageIndex" :w="bgImageConfig.width" :min-width="50"
                :min-height="50" :h="bgImageConfig.height" @dragging="onImageDrag" @resizing="onImageResize">
                <img :src="imageSrc" width="100%" height="100%" alt="">
            </vue-draggable-resizable>
            <vue-draggable-resizable :parent="true" :z="zIndexObj.titleIndex" :w="titleConfig.width" :min-width="100"
                :min-height="titleConfig.fontSize + 10" :h="titleConfig.height" @dragging="onTitleDrag"
                @resizing="onTitleResize">
                <!-- <input v-if="showInput" v-model="titleConfig.content" type="text" :maxlength="10" placeholder="请输入标题"> -->
                <div :style="{ color: titleConfig.color, fontSize: titleConfig.fontSize + 'px' }" class="text-box"
                    @dblclick="handleDoubleClick">
                    <div :contenteditable="contenteditable">
                        {{ titleConfig.content }}
                    </div>
                    <div class="edit-tools" v-if="showTextTools">
                        <el-row>
                            <el-col>
                                大小：
                                <el-select size="mini" style="width: 50px;" v-model="titleConfig.fontSize">
                                    <el-option label="12px" :value="12"></el-option>
                                    <el-option label="14px" :value="14"></el-option>
                                    <el-option label="16px" :value="16"></el-option>
                                    <el-option label="18px" :value="18"></el-option>
                                    <el-option label="20px" :value="20"></el-option>
                                </el-select>
                            </el-col>
                            <el-col>
                                颜色：
                                <el-color-picker v-model="titleConfig.color" />
                            </el-col>
                            <el-col>
                                <el-button @click.stop="handleTitleConfig">确定</el-button>
                            </el-col>
                        </el-row>
                    </div>
                </div>
            </vue-draggable-resizable>
            
        </div>
        <div class="z-index-box">
            <draggable v-model="draggList" class="dragg-list" item-key="id" animation="200" :sort="true">
                <template #item="{ element }">
                    <div class="dragg-item">
                        {{ element.name }}
                    </div>
                </template>
            </draggable>
        </div>
    </div>

    <!-- 位置大小信息 -->
    <div>
        <div>背景的位置大小: x: {{ bgImageConfig.x }},y: {{ bgImageConfig.y }}, w: {{ bgImageConfig.width }}, h: {{
            bgImageConfig.height }}</div>
        <div>图片的位置大小: x: {{ imageConfig.x }},y: {{ imageConfig.y }}, w: {{ imageConfig.width }}, h: {{
            imageConfig.height
            }}</div>
        <div>标题的位置大小: x: {{ titleConfig.x }},y: {{ titleConfig.y }}, w: {{ titleConfig.width }}, h: {{
            titleConfig.height }}, content: {{ titleConfig.content }}</div>
    </div>
</template>

<script setup>
import draggable from "vuedraggable";
import imageSrc from '@/assets/image.png';
import logoSrc from '@/assets/logo.png'
import videoSrc from '@/assets/test.mp4'
import { ref, reactive, watch } from "vue";
import axios from "axios";

const showTextTools = ref(false)
const contenteditable = ref(false)

const draggList = ref([
    {
        id: 1,
        name: '标题',
        type: 'title',
    },
    {
        id: 2,
        name: '图片',
        type: 'image'
    },
    {
        id: 3,
        name: '商品',
        type: 'goods'
    }
])

const zIndexObj = reactive({
    titleIndex: 0,
    goodsIndex: 0,
    imageIndex: 0
})

const bgImageConfig = reactive({
    x: 0,
    y: 0,
    width: 200,
    height: 200,
    scale: 1,
    rotate: 0,
    zIndex: 0
})

const titleConfig = reactive({
    x: 0,
    y: 0,
    width: 200,
    height: 50,
    scale: 1,
    rotate: 0,
    zIndex: 0,
    content: "的点点的点fasdf点多11112222大fasdf222",
    color: 'rgb(255, 0, 0)',
    fontSize: 16
})

const imageConfig = reactive({
    x: 0,
    y: 0,
    width: 200,
    height: 200,
    scale: 1,
    rotate: 0,
    zIndex: 0
})

watch(() => draggList.value, (newValue, oldValue) => {
    console.log(newValue, oldValue);
    updateZIndex(newValue)
}, { deep: true })

const handleDoubleClick = () => {
    console.log('handleDoubleClick ');
    showTextTools.value = true
    contenteditable.value = true
}

const handleTitleConfig = () => {
    showTextTools.value = false
    contenteditable.value = false
    console.log('handleTitleConfig');
}

const savePhoto = () => {
    const params = {
        // 背景配置
        background_path: "E:/image.png", //背景图地址
        background_size: `(${bgImageConfig.width},${bgImageConfig.height})`, //设置输出背景图片分辨率
        // 文字配置
        text_content: titleConfig.content,// # 文字内容
        text_position: `(${titleConfig.x - bgImageConfig.x},${titleConfig.y - bgImageConfig.y})`, // 文字位置
        text_box_size: `(${titleConfig.width},${titleConfig.height})`,// 文本框大小
        text_font_size: titleConfig.fontSize,// 字体大小
        text_font_path: "C:/Windows/Fonts/simfang.ttf", // 提供完整的字体文件路径
        text_color: titleConfig.color.substring(3), //字体颜色
        chars_per_line: titleConfig.width / titleConfig.fontSize,// 每行11个字符(根据文本框限制来确定)
        // max_chars: "100",// 最大字符数限制
        line_spacing: "2", // 行间距（像素）
        text_padding: "(5, 5, 5, 5)", // 文本框内边距
        // 插入图片配置
        overlay_image_path: "E:/logo.png", //图片地址
        overlay_position: `(${imageConfig.x - bgImageConfig.x},${imageConfig.y - bgImageConfig.y})`, //图片位置
        overlay_size: `(${imageConfig.width},${imageConfig.height})`, // 图片大小
        output_path: "E:/output/test.png", // 输出地址
    }
    axios.post('/api/create_sticker', params).then(res => {
        console.log(res)
    }).catch(err => {
        console.log(err)
    })
}

// 图片拖拽
const onImageDrag = (left, top) => {
    bgImageConfig.x = left
    bgImageConfig.y = top
}

// 图片缩放
const onImageResize = (left, top, width, height) => {
    bgImageConfig.x = left
    bgImageConfig.y = top
    bgImageConfig.width = width
    bgImageConfig.height = height
}

// 标题拖拽
const onTitleDrag = (left, top) => {
    titleConfig.x = left
    titleConfig.y = top
}

// 标题缩放
const onTitleResize = (left, top, width, height) => {
    titleConfig.x = left
    titleConfig.y = top
    titleConfig.width = width
    titleConfig.height = height
}

// logo 拖拽
const onLogoDrag = (left, top) => {
    imageConfig.x = left
    imageConfig.y = top
}

// logo 缩放
const onLogoResize = (left, top, width, height) => {
    imageConfig.x = left
    imageConfig.y = top
    imageConfig.width = width
    imageConfig.height = height
}

const updateZIndex = (arr) => {
    arr.forEach((item, index) => {
        const zIndex = arr.length - index;
        if (item.type === 'title') {
            zIndexObj.titleIndex = zIndex;
        } else if (item.type === 'goods') {
            zIndexObj.goodsIndex = zIndex;
        } else if (item.type === 'image') {
            zIndexObj.imageIndex = zIndex;
        }
    });
}
</script>

<style scoped>
.dragg-container {
    display: flex;
}

.dragg-content {
    position: relative;
    width: 300px;
    height: 533px;
    border: 1px solid #000;
    background: #000;
    color: #fff;
}


.dragg-item {
    width: 50px;
    height: 50px;
    background: #fff;
    /* position: absolute; */
    border: 1px solid #eee;
}

.dragg-item:hover {
    cursor: move;
}

.text-box {
    word-break: break-all;
    font-family: fangsong;
}
</style>